﻿<common:LayoutAwarePage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:EcommFashion"
    xmlns:common="using:EcommFashion.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Data="using:EcommFashion.Data"
    x:Name="pageRoot"
    x:Class="EcommFashion.ItemDetail"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">


	<Page.TopAppBar>
        <AppBar x:Name="TopApp" Padding="10,0,10,0" MinHeight="110" Background="#D1000000" BorderBrush="#D1000000">
            <Grid Height="100" Margin="40,0">
        		<StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
        			<Button x:Name="btnHome" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Click="btnHome_Click" >
        				<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="92" Margin="0" Width="92">
        					<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBarBtn/HomeappbarBtn.png" Width="92" Margin="0" Height="92"/>
        				</Grid>
        			</Button>
        			<Button x:Name="btnMale" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0" >
        				<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="92" Margin="0" Width="92">
        					<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBarBtn/MaleappBarBtn.png" Width="92" Margin="0" Height="92"/>
        				</Grid>
        			</Button>
        			<Button x:Name="btnFemale" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="10,0,0,0" >
        				<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="92" Margin="0" Width="92">
        					<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBarBtn/FemaleAppbarBtn.png" Width="92" Margin="0" Height="92"/>
        				</Grid>
        			</Button>

        		</StackPanel>
        	</Grid>
        </AppBar>
    </Page.TopAppBar>
    <Page.BottomAppBar>
        <AppBar x:Name="BottamApp" Padding="10,0,10,0" MinHeight="90" Background="#D1000000" BorderBrush="#D1000000">
            <Grid Margin="40,10,30,10" HorizontalAlignment="Right">
                <StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                    <Button x:Name="btnMyCart" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Click="btnMyCart_Click" >
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="75" Margin="0" Width="75">
                        	<Grid.RowDefinitions>
                        		<RowDefinition Height="57"/>
                        		<RowDefinition Height="18"/>
                        	</Grid.RowDefinitions>
                            <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBarBtn/ShoppingAppBarBtn.png" Width="57" Margin="0" Height="57"/>
                            <StackPanel Margin="6,0" Orientation="Horizontal" Grid.Row="1">
                            	<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="my cart" VerticalAlignment="Bottom" FontSize="13.333"/>
                            	<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="(3)" VerticalAlignment="Bottom" FontSize="13.333" Margin="3,0,0,0"/>
                            </StackPanel>
                        </Grid>
                    </Button>

                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>



    <common:LayoutAwarePage.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
    	<CollectionViewSource
    		x:Name="groupedItemsViewSource"
    		Source="{Binding Groups}"
    		IsSourceGrouped="true"
    		ItemsPath="TopItems"
    		d:Source="{Binding AllGroups, Source={d:DesignInstance IsDesignTimeCreatable=True, Type=Data:SampleDataSource}}"/>
</common:LayoutAwarePage.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Background="#FF3E4849">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grdSnapView">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Visible</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <!-- Back button and page title -->
        <ScrollViewer x:Name="scrollViewer" Grid.RowSpan="2" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Background="Transparent"
                      ZoomMode="Disabled" VerticalScrollMode="Disabled">
        	<Grid>
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="37*"/>
        			<ColumnDefinition Width="63*"/>
        		</Grid.ColumnDefinitions>
        		<Grid x:Name="grdMainImage">
        			<Image Source="Assets/ItemDetail/itemDetailMainImage.png" Stretch="Fill" Margin="0"/>
        		</Grid>
        		<ListView Grid.Column="1" Margin="60,140,0,90" ItemContainerStyle="{StaticResource ListViewItemStyle1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Style="{StaticResource ListViewStyle1}" IsHitTestVisible="False">
        			<ListViewItem x:Name="lv1" Margin="0" Width="450" Height="455" VerticalAlignment="Top">
        				<Grid Height="455" Width="450">
        					<Grid.RowDefinitions>
        						<RowDefinition Height="60"/>
        						<RowDefinition Height="150"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="120"/>
        					</Grid.RowDefinitions>
        					<StackPanel Margin="15,0,0,0" VerticalAlignment="Center" Orientation="Horizontal">
        						<Border BorderBrush="Black" BorderThickness="0" Height="40" CornerRadius="25" Width="40" Background="#B2000000" HorizontalAlignment="Left">
        							<TextBlock TextWrapping="Wrap" Text="A" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" LineHeight="29.333" LineStackingStrategy="BlockLineHeight" Margin="10,0,9,0" Height="24" FontWeight="SemiLight"/>
        						</Border>
        						<TextBlock TextWrapping="Wrap" Text="Jacket" FontSize="24" Margin="10,0,0,0" LineStackingStrategy="BlockLineHeight" LineHeight="24" VerticalAlignment="Center"/>
        					</StackPanel>
        					<TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra, risus non ultrices eleifend, ante elit scelerisque felis, a egestas enim lacus in ante. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper.. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper." FontSize="12" Foreground="#A5FFFFFF" Grid.Row="1" Margin="15,0" LineStackingStrategy="BlockLineHeight" LineHeight="21.333"/>
        					<Grid Margin="15,0,0,0" Grid.Row="2" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Sizes" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="S, M, L, XL, XXL" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<Grid Margin="15,0,0,0" Grid.Row="3" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Color" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<StackPanel Grid.Column="1" Orientation="Horizontal">
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF2397D9"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FFAB2F2F" Margin="10,0,0,0"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF4F7D49" Margin="10,0,0,0"/>
        						</StackPanel>
        					</Grid>
        					<Grid Margin="15,7.5,0,7.5" Grid.Row="4" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Availability" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="Available" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<StackPanel Grid.Row="5" VerticalAlignment="Center" Height="63" Margin="15,0,0,0" Orientation="Horizontal">
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/ShoppingIcon.png"/>
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/FavouriteIcon.png" Margin="20,0,0,0"/>
        					</StackPanel>
        				</Grid>
        			</ListViewItem>
        			<ListViewItem x:Name="lv2" Margin="20,0,0,0" Width="450" Height="455" VerticalAlignment="Top">
        				<Grid Height="455" Width="450">
        					<Grid.RowDefinitions>
        						<RowDefinition Height="60"/>
        						<RowDefinition Height="150"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="120"/>
        					</Grid.RowDefinitions>
        					<StackPanel Margin="15,0,0,0" VerticalAlignment="Center" Orientation="Horizontal">
        						<Border BorderBrush="Black" BorderThickness="0" Height="40" CornerRadius="25" Width="40" Background="#B2000000" HorizontalAlignment="Left">
        							<TextBlock TextWrapping="Wrap" Text="B" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" LineHeight="29.333" LineStackingStrategy="BlockLineHeight" Margin="10,0,9,0" Height="24" FontWeight="SemiLight"/>
        						</Border>
        						<TextBlock TextWrapping="Wrap" Text="T-shirt" FontSize="24" Margin="10,0,0,0" LineStackingStrategy="BlockLineHeight" LineHeight="24" VerticalAlignment="Center"/>
        					</StackPanel>
        					<TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra, risus non ultrices eleifend, ante elit scelerisque felis, a egestas enim lacus in ante. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper.. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper." FontSize="12" Foreground="#A5FFFFFF" Grid.Row="1" Margin="15,0" LineStackingStrategy="BlockLineHeight" LineHeight="21.333"/>
        					<Grid Margin="15,0,0,0" Grid.Row="2" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Sizes" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="S, M, L, XL, XXL" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<Grid Margin="15,0,0,0" Grid.Row="3" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Color" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<StackPanel Grid.Column="1" Orientation="Horizontal">
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF2397D9"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FFAB2F2F" Margin="10,0,0,0"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF4F7D49" Margin="10,0,0,0"/>
        						</StackPanel>
        					</Grid>
        					<Grid Margin="15,7.5,0,7.5" Grid.Row="4" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Availability" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="Available" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<StackPanel Grid.Row="5" VerticalAlignment="Center" Height="63" Margin="15,0,0,0" Orientation="Horizontal">
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/ShoppingIcon.png"/>
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/FavouriteIcon.png" Margin="20,0,0,0"/>
        					</StackPanel>
        				</Grid>
        			</ListViewItem>
        			<ListViewItem x:Name="lv3" Margin="20,0,0,0" Width="450" Height="455" VerticalAlignment="Top">
        				<Grid Height="455" Width="450">
        					<Grid.RowDefinitions>
        						<RowDefinition Height="60"/>
        						<RowDefinition Height="150"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="120"/>
        					</Grid.RowDefinitions>
        					<StackPanel Margin="15,0,0,0" VerticalAlignment="Center" Orientation="Horizontal">
        						<Border BorderBrush="Black" BorderThickness="0" Height="40" CornerRadius="25" Width="40" Background="#B2000000" HorizontalAlignment="Left">
        							<TextBlock TextWrapping="Wrap" Text="C" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" LineHeight="29.333" LineStackingStrategy="BlockLineHeight" Margin="10,0,9,0" Height="24" FontWeight="SemiLight"/>
        						</Border>
        						<TextBlock TextWrapping="Wrap" Text="Pants" FontSize="24" Margin="10,0,0,0" LineStackingStrategy="BlockLineHeight" LineHeight="24" VerticalAlignment="Center"/>
        					</StackPanel>
        					<TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra, risus non ultrices eleifend, ante elit scelerisque felis, a egestas enim lacus in ante. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper.. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper." FontSize="12" Foreground="#A5FFFFFF" Grid.Row="1" Margin="15,0" LineStackingStrategy="BlockLineHeight" LineHeight="21.333"/>
        					<Grid Margin="15,0,0,0" Grid.Row="2" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Sizes" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="S, M, L, XL, XXL" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<Grid Margin="15,0,0,0" Grid.Row="3" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Color" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<StackPanel Grid.Column="1" Orientation="Horizontal">
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF2397D9"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FFAB2F2F" Margin="10,0,0,0"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF4F7D49" Margin="10,0,0,0"/>
        						</StackPanel>
        					</Grid>
        					<Grid Margin="15,7.5,0,7.5" Grid.Row="4" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Availability" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="Available" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<StackPanel Grid.Row="5" VerticalAlignment="Center" Height="63" Margin="15,0,0,0" Orientation="Horizontal">
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/ShoppingIcon.png"/>
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/FavouriteIcon.png" Margin="20,0,0,0"/>
        					</StackPanel>
        				</Grid>
        			</ListViewItem>
        			<ListViewItem x:Name="lv4" Margin="20,0,0,0" Width="450" Height="455" VerticalAlignment="Top">
        				<Grid Height="455" Width="450">
        					<Grid.RowDefinitions>
        						<RowDefinition Height="60"/>
        						<RowDefinition Height="150"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="120"/>
        					</Grid.RowDefinitions>
        					<StackPanel Margin="15,0,0,0" VerticalAlignment="Center" Orientation="Horizontal">
        						<Border BorderBrush="Black" BorderThickness="0" Height="40" CornerRadius="25" Width="40" Background="#B2000000" HorizontalAlignment="Left">
        							<TextBlock TextWrapping="Wrap" Text="D" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" LineHeight="29.333" LineStackingStrategy="BlockLineHeight" Margin="10,0,9,0" Height="24" FontWeight="SemiLight"/>
        						</Border>
        						<TextBlock TextWrapping="Wrap" Text="Cap" FontSize="24" Margin="10,0,0,0" LineStackingStrategy="BlockLineHeight" LineHeight="24" VerticalAlignment="Center"/>
        					</StackPanel>
        					<TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra, risus non ultrices eleifend, ante elit scelerisque felis, a egestas enim lacus in ante. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper.. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper." FontSize="12" Foreground="#A5FFFFFF" Grid.Row="1" Margin="15,0" LineStackingStrategy="BlockLineHeight" LineHeight="21.333"/>
        					<Grid Margin="15,0,0,0" Grid.Row="2" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Sizes" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="S, M, L, XL, XXL" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<Grid Margin="15,0,0,0" Grid.Row="3" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Color" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<StackPanel Grid.Column="1" Orientation="Horizontal">
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF2397D9"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FFAB2F2F" Margin="10,0,0,0"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF4F7D49" Margin="10,0,0,0"/>
        						</StackPanel>
        					</Grid>
        					<Grid Margin="15,7.5,0,7.5" Grid.Row="4" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Availability" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="Available" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<StackPanel Grid.Row="5" VerticalAlignment="Center" Height="63" Margin="15,0,0,0" Orientation="Horizontal">
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/ShoppingIcon.png"/>
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/FavouriteIcon.png" Margin="20,0,0,0"/>
        					</StackPanel>
        				</Grid>
        			</ListViewItem>
        			<ListViewItem x:Name="lv5" Margin="20,0,0,0" Width="450" Height="455" VerticalAlignment="Top">
        				<Grid Height="455" Width="450">
        					<Grid.RowDefinitions>
        						<RowDefinition Height="60"/>
        						<RowDefinition Height="150"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="40"/>
        						<RowDefinition Height="120"/>
        					</Grid.RowDefinitions>
        					<StackPanel Margin="15,0,0,0" VerticalAlignment="Center" Orientation="Horizontal">
        						<Border BorderBrush="Black" BorderThickness="0" Height="40" CornerRadius="25" Width="40" Background="#B2000000" HorizontalAlignment="Left">
        							<TextBlock TextWrapping="Wrap" Text="E" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" LineHeight="29.333" LineStackingStrategy="BlockLineHeight" Margin="10,0,9,0" Height="24" FontWeight="SemiLight"/>
        						</Border>
        						<TextBlock TextWrapping="Wrap" Text="Shoes" FontSize="24" Margin="10,0,0,0" LineStackingStrategy="BlockLineHeight" LineHeight="24" VerticalAlignment="Center"/>
        					</StackPanel>
        					<TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra, risus non ultrices eleifend, ante elit scelerisque felis, a egestas enim lacus in ante. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper.. Sed egestas mollis magna, in feugiat felis dapibus non. Quisque ornare risus at ligula tincidunt ullamcorper." FontSize="12" Foreground="#A5FFFFFF" Grid.Row="1" Margin="15,0" LineStackingStrategy="BlockLineHeight" LineHeight="21.333"/>
        					<Grid Margin="15,0,0,0" Grid.Row="2" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Sizes" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="S, M, L, XL, XXL" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<Grid Margin="15,0,0,0" Grid.Row="3" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Color" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<StackPanel Grid.Column="1" Orientation="Horizontal">
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF2397D9"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FFAB2F2F" Margin="10,0,0,0"/>
        							<Ellipse Width="30" Height="30" HorizontalAlignment="Left" Fill="#FF4F7D49" Margin="10,0,0,0"/>
        						</StackPanel>
        					</Grid>
        					<Grid Margin="15,7.5,0,7.5" Grid.Row="4" VerticalAlignment="Center" >
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="115"/>
        							<ColumnDefinition Width="*"/>
        						</Grid.ColumnDefinitions>
        						<TextBlock TextWrapping="Wrap" Text="Availability" FontSize="16" Margin="0" VerticalAlignment="Center" FontWeight="Bold"/>
        						<TextBlock TextWrapping="Wrap" Text="Available" FontSize="18.667" Margin="0" Grid.Column="1" VerticalAlignment="Center"/>
        					</Grid>
        					<StackPanel Grid.Row="5" VerticalAlignment="Center" Height="63" Margin="15,0,0,0" Orientation="Horizontal">
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/ShoppingIcon.png"/>
        						<Image Height="63" Width="63" HorizontalAlignment="Left" Source="Assets/ItemDetail/FavouriteIcon.png" Margin="20,0,0,0"/>
        					</StackPanel>
        				</Grid>
        			</ListViewItem>
        		</ListView>
        	</Grid>
        </ScrollViewer>
        <Grid x:Name="grid">
            <Grid.ColumnDefinitions>
            	<ColumnDefinition Width="Auto"/>
            	<ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        	<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        	<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" Visibility="Collapsed"/>
        	<Grid HorizontalAlignment="Right" Height="80" VerticalAlignment="Top" Width="230" Margin="0,0,110,0" Background="#FF748181" Grid.Column="1">
        		<Image HorizontalAlignment="Right" Height="77" VerticalAlignment="Center" Width="203" Source="Assets/Logo.png" Margin="0,0,10,0"/>
        	</Grid>
        </Grid>
        <Grid x:Name="grdSnapView" Background="#FF3E4849" Grid.RowSpan="2" Visibility="Collapsed">
        	<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="&quot;Please switch to full screen to view the details.&quot;" VerticalAlignment="Center" AllowDrop="True" FontSize="21.333" FontFamily="Segoe UI"/>
        </Grid>

    </Grid>
</common:LayoutAwarePage>
